<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<title>登录</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="Cache-Control" content="no-siteapp" />

	<link rel="stylesheet" href="static/css/amazeui.css" />
	<link href="static/css/dlstyle.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="static/css/bootstrap.min.css" />
</head>

<body>

	<div class="login-boxtitle" style="height: 100px;">
		<div class="logoBig">
			<img src="static/images/logo.png" style="margin-left: 0px ; height: 100px;">
		</div>
	</div>

	<div class="login-banner" style="background-image: url('./static/images/big.jpg');">
		<div class="login-main">
			<div class="login-banner-bg"><span></span><img src="" /></div>
			<div class="login-box" style="margin-top: 20px;">

				<h3 class="title">登录商城</h3>
				<div id="switchLoginType" style="margin-left: 53px;font-size:medium;">
					<a href="#" onclick="switchLoginType('password')">账号密码登录</a>
					<a href="#" onclick="switchLoginType('dynamic')">| <span></span>动态验证码登录</a>
				</div>


				<div class="clear"></div>

				<div class="login-form" style="background: none; margin-top: 15px;">
					<form id="loginForm">
						<div id="dynamicUsernameFields">
							<div class="user-name" style="margin-top: 20px;">
								<label for="user"><span class="glyphicon glyphicon-user"
										aria-hidden="true"></span></label>
								<input type="text" name="username" id="username" placeholder="用户名">
							</div>
							<div class="user-pass" style="margin-top: 20px;">
								<label for="password"><span class="glyphicon glyphicon-lock"
										aria-hidden="true"></span></label>
								<input type="password" name="password" id="password" placeholder="请输入密码">
							</div>
							<div class="user-pass" style="margin-top: 20px;">
								<label for="password"><span class="glyphicon glyphicon-lock"
										aria-hidden="true"></span></label>
								<input type="password" name="" id="reqpassword" placeholder="请确认密码">
							</div>
						</div>

						<div id="dynamicCodeFields" style="display: none;">
							<div class="user-name" style="margin-top: 20px;">
								<label for="phoneNumber"><span class="glyphicon glyphicon-phone"
										aria-hidden="true"></span></label>
								<input type="text" name="" id="phoneNumber" placeholder="请输入手机号" style="width: 230px;">
								<button onclick="sendCode()"
									style="background-color: rgb(162, 227, 228);line-height: 25px;">发送验证码</button>
							</div>
							<div class="user-pass" style="margin-top: 20px;">
								<label for="dynamicCode"><span class="glyphicon glyphicon-flash"
										aria-hidden="true"></span></label>
								<input type="text" name="" id="dynamicCode" placeholder="请输入动态验证码">
							</div>
						</div>
					</form>
				</div>

				<div class="login-links">
					<a href="register.html">还没有账号?去注册</a>
					<label for="remember-me" class="am-fr"><input id="remember-me" type="checkbox">记住我</label>
					<br />
				</div>
				<div class="am-cf">
					<input type="submit" onclick="submitForm()" value="登录" class="am-btn am-btn-primary am-btn-sm">
				</div>
				<div class="partner">

				</div>

			</div>
		</div>
	</div>

	<div class="footer ">
		<div class="footer-hd ">

		</div>
		<div class="footer-bd ">
			<p>
				<a href="# ">联系我们</a>
				<a href="# ">网站地图</a>
			</p>
		</div>
	</div>
</body>
<script src="/static/js/axios.min.js"></script>
<script>

	document.addEventListener('DOMContentLoaded', function () {
		var userCookie = getCookieValue('user'); // 从 Cookie 中获取用户信息
		if (userCookie) {
			var user = JSON.parse(userCookie); // 将 JSON 字符串解析为用户对象
			document.getElementById('username').value = user.userName; // 将用户名填充到对应的输入框
			document.getElementById('password').value = user.password; // 将密码填充到对应的输入框
			document.getElementById('reqpassword').value = user.password
		}
	});

	function getCookieValue(name) {
		var cookieName = encodeURIComponent(name) + "=";
		var cookieStart = document.cookie.indexOf(cookieName);
		var cookieValue = null;

		if (cookieStart > -1) {
			var cookieEnd = document.cookie.indexOf(";", cookieStart);
			if (cookieEnd == -1) {
				cookieEnd = document.cookie.length;
			}
			cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
		}

		return cookieValue;
	}

	function switchLoginType(type) {
		document.querySelectorAll('#switchLoginType a').forEach(link => {
			link.classList.remove('active');
		});
		if (type === 'password') {
			document.getElementById('dynamicCodeFields').style.display = 'none';
			document.getElementById('dynamicUsernameFields').style.display = 'block';
		} else if (type === 'dynamic') {
			document.getElementById('dynamicCodeFields').style.display = 'block';
			document.getElementById('dynamicUsernameFields').style.display = 'none';
		}
		document.querySelector('#switchLoginType a:nth-child(' + (type === 'password' ? 1 : 2) + ')').classList.add('active');
	}

	//发送验证码
	var code;
	function sendCode() {
		event.preventDefault(); // 阻止默认提交行为
		var phone = document.getElementById('phoneNumber').value;
		var user = { phone };
		axios.post('http://localhost:8080/user/sendCode', user)
			.then(function (response) {
				self.code = response.data.data;
				document.getElementById('dynamicCodeFields').style.display = 'block';
			    document.getElementById('dynamicUsernameFields').style.display = 'none';
			})
	}

	function submitForm() {
		var phone = document.getElementById('phoneNumber').value;
		var dynamicCode = document.getElementById('dynamicCode').value;
		var userName = document.getElementById('username').value;
		var password = document.getElementById('password').value;
		var rememberMe = document.getElementById('remember-me').checked; // 获取是否勾选记住我
		if (document.getElementById('dynamicCodeFields').style.display == 'block') {
			// 发送动态验证码登录请求
			if (dynamicCode == self.code) {
				var user = { phone, code }
				axios.post('http://localhost:8080/user/login2', user)
					.then(function (response) {
						if (response.data.code==0){
							//页面跳转
							window.history.back();

						}
					})
			}
			else {
				alert("验证码错误");
			}
		}
		else {
			// 发送账号密码登录请求
			var user = { userName, password }
			axios.post('http://localhost:8080/user/login1', user)
				.then(function (response) {
					let data = response.data;
					if (data.code == 0) {
						let jwtToken = data.data;

						// 存储token到Local Storage
						localStorage.setItem('token', jwtToken);

						// 设置user存储到Cookie，并设置过期时间为七天后
						if (rememberMe) {
							let expirationDate = new Date();
							expirationDate.setDate(expirationDate.getDate() + 7);
							document.cookie = `user=${JSON.stringify(user)}; expires=${expirationDate.toUTCString()}`;
							console.log("cookie存储了user");
						}
						//页面跳转
						window.history.back();
					}
				})
		}
	}
</script>

</html>